<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <!-- 头部 -->
      <el-header>
        <div style="display: flex; align-items: center;">
          <h2 style="margin: 0 20px;">CRM系统</h2>
        </div>
      </el-header>

      <el-container>
        <!-- 左侧导航栏 -->
        <el-aside width="200px">
          <el-menu :default-active="activeMenu" @select="handleSelect" style="height: 100%; border-right: none;">
            <el-menu-item index="customer">
              <template #title>
                <i class="el-icon-user"></i>
                客户管理
              </template>
            </el-menu-item>
            <el-menu-item index="business">
              <template #title>
                <i class="el-icon-suitcase"></i>
                业务管理
              </template>
            </el-menu-item>
            <el-menu-item index="ticket">
              <template #title>
                <i class="el-icon-document"></i>
                工单管理
              </template>
            </el-menu-item>
            <el-menu-item index="inventory">
              <template #title>
                <i class="el-icon-box"></i>
                库存管理
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主要内容区域 -->
        <el-main>
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import customertable from '@/components/main/customertable.vue';
import operationaltable from "@/components/main/operationaltable.vue";
import workordertable from "@/components/main/workordertable.vue";
import inventorytable from "@/components/main/inventorytable.vue";

export default {
  data() {
    return {
      activeMenu: 'customer', // 默认显示
      adminSubmenuOpen: false // 管理员子菜单默认关闭
    };
  },
  computed: {
    currentComponent() {
      switch (this.activeMenu) {
        case 'customer':
          return customertable;
        case 'business':
          return operationaltable;
        case 'ticket':
          return workordertable;
        case 'inventory':
          return inventorytable;
        default:
          return customertable; // 默认返回主页组件
      }
    }
  },
  methods: {
    handleSelect(key) {
      if (key === 'admin') {
        this.adminSubmenuOpen = !this.adminSubmenuOpen;
      } else {
        this.activeMenu = key;
      }
    }
  }
};
</script>

<style scoped>
#app {
  height: 100vh;
}

.el-header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
  text-align: center;
}

.el-aside {
  background-color: #D3DCE6;
}

.el-main {
  padding: 20px;
  background-color: #E9EEF3;
  overflow: auto;
}
</style>
